import { memo, useState, useEffect } from "react";
import styles from "./bookPageDetails.module.scss";
import Top from "../../components/top/Top";
import { useParams } from "react-router-dom";
import { details } from "../../Api";
import ToHome from "../../components/toHome/ToHome";
import { useNavigate } from "react-router-dom";
import Expert from "../../components/expert/Expert";
let BookPageDetails: React.FC = () => {
  let to = useNavigate();
  let { id } = useParams();
  let [l, setL] = useState<Obj>({});
  //   console.log(id);
  let data = async () => {
    let { data } = await details(id!);
    // console.log(data);
    setL({ ...l, ...data.data });
  };
  let show = Object.keys(l).length > 0;
  useEffect(() => {
    data();
  }, []);
  return (
    <>
      <ToHome />
      <Top title="书单详情" />
      <div className={styles.box}>
        <div className={styles.tou}>
          <img src={l.goods_img} alt="" />
          <p>{l.goods_name}</p>
          <div className={styles.label}>
            <span>{show && l.label_list[0].label_name}</span>
            <span>{show && l.label_list[1].label_name}</span>
          </div>
        </div>
        <div className={styles.booklist}>
          <h3>书籍列表</h3>
          <ul>
            {show &&
              l.son_list.map((item: Obj) => (
                <li key={item.goods_id} onClick={() => to("/bookdetails/" + item.goods_id)}>
                  <img src={item.goods_img} alt="" />
                  <div className={styles.centent}>
                    <h3>{item.goods_name}</h3>
                    <p>
                      {item.expert_speak_info.length === 0
                        ? item.goods_desc
                        : item.expert_speak_info.description}
                    </p>
                    <div className={styles.user}>
                      <img src={item.expert_speak_info.avatar} alt="" />
                      <span>{item.expert_speak_info.name}</span>
                    </div>
                  </div>
                </li>
              ))}
          </ul>
        </div>
        <Expert l={l} show={show} />
      </div>
    </>
  );
};
export default memo(BookPageDetails);
